<template>
  <a-drawer
    :width="drawerWidth"
    @close="handleCancel"
    :visible="visible"
    :confirmLoading="confirmLoading"
  >
    <template  slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>
    </template>
    <div :style="{width: '100%',padding: '10px 16px',background: '#fff',}">

      <a-spin :spinning="confirmLoading">

        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline">
            <a-form-item>
                  <span  class="table-page-search-submitButtons">
                    <a-button type="primary" @click="handleAdd">新增</a-button>
                    <a-button  type="danger" icon="delete"  v-if="selectedRowKeys.length > 0"  @click="batchDel">批量删除</a-button>
                  </span>
            </a-form-item>
          </a-form>
        </div>


        <!-- table区域-begin -->
        <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>
          <a-table
            ref="table"
            size="middle"
            bordered
            :rowKey="(r)=>r.id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange">
            <span slot="ellipsis" slot-scope="text">
              <ak-ellipsis :value="text"/>
            </span>
            <span slot="action" slot-scope="text, record"  class="table-operator">
              <a @click="handleDelete(record.id)">删除</a>
              <a @click="handleEdit(record)">编辑</a>
              <a @click="handleDesign(record)">设计</a>
            </span>
          </a-table>
        </div>

        <a-modal v-model="addModel.show" title="设计表单" :confirmLoading="addModel.confirmLoading"
          @cancel="()=>addModel.show= false" @ok="addModelOk">
          <a-form-model
            ref="addModelRef"
            :model="addModel.data"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        :rules="addModel.rules">

            <a-form-model-item
              ref="name"
              prop="name"
              label="名称">
              <a-input autocomplete="off" placeholder="请输入名称" v-model="addModel.data.name"/>
            </a-form-model-item>
          </a-form-model>
        </a-modal>


        <a-modal v-model="design.show" title="设计表单" :confirmLoading="design.confirmLoading"
                 :footer="false"
                width="80%" :mast="false">
            <iframe  :id="design.id" :src="design.url"  frameborder="0" :style="`width: 100%; height: ${screenHeight-450}px`" scrolling="auto"></iframe>
        </a-modal>
      </a-spin>
    </div>
  </a-drawer>
</template>

<script>
    import AkfhListMixin from '../../mixin/AkfhListMixin';
    import AkfhModelDrawMixin from '../../mixin/AkfhModelDrawMixin';
    import {activitFormDesignlUrl} from '../../api/url';
    import AkEllipsis from '../../components/akfh/AkEllipsis'
    import DefinitionList from './modal/DefinitionList'
    import AFormModelItem from 'ant-design-vue/es/form-model/FormItem'
    import { concatUrl, randomUUID } from '../../utils/util'
    import { getAction } from '../../api/manage'
    import { appApiBaseUrl } from '../../config/constant.config'
    import { ACCESS_TOKEN } from '../../store/mutation-types'

    export default {
      name: 'FormDesignList',
      components: { AFormModelItem, DefinitionList, AkEllipsis },
      describe:'设计表单模型',
      mixins:[AkfhListMixin, AkfhModelDrawMixin],
        data(){
          return {
            screenHeight:window.screen.availHeight,
            design:{
              spinning:false,
              show:false,
              confirmLoading:false,
              id:randomUUID(),
              url:'',
              data:{},
              url:''
            },
            addModel:{
              show:false,
              confirmLoading:false,
              data:{
                id:'',
                modelId:'',
                name:''
              },
              rules: {
                name: this.getValidatorRolesRequired(200)
              }
            },
            columns:[
              {
                title: '#',
                dataIndex: '',
                key: 'rowIndex',
                width: 120,
                align: "center",
                customRender: function (t, r, index) {
                  return parseInt(index) + 1;
                }
              },
              {
                title: '名称',
                align: "center",
                dataIndex: 'name',
                scopedSlots: {customRender: 'ellipsis'},
              },

              {
                title: '创建时间',
                align: "center",
                dataIndex: 'createDateTime',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '操作',
                dataIndex: 'action',
                align: "center",
                scopedSlots: {customRender: 'action'},
              }
            ],
            deploymentData:{
              visible:false,
              confirmLoading:false,
              id:"",
              file:'',
            },
            ipagination:false,
            url:activitFormDesignlUrl
          }

        },
        methods:{
          handleDesign(record){
            this.design.show = true;
            this.design.confirmLoading = false;
            this.design.url = concatUrl(appApiBaseUrl, this.url.getDesignContent)+"?formDesignId="+record.id
            +"&X-Access-Token="+this.$ls.get(ACCESS_TOKEN)+"&type=updateFormDesign&no-cache="+new Date().getTime();
            this.design.data = record;
          },
          // 数据填充后
          afterFullData() {
            this.loadData();
          },
          addModelOk(){
            let that = this;
            this.$refs.addModelRef.validate((success)=>{
              if(success){
                let formData = that.addModel.data;
                if(!that.beforeHandleSubmit(formData)){
                  return;
                }
                that.addModel.confirmLoading = true;
                let obj;
                if (!formData.id) {
                  obj = that.saveAdd(formData);
                } else {
                  obj = that.saveEdit(formData);
                }
                obj.then((res) => {
                  if (res.success) {
                    that.$message.success(res.message);
                    that.addModel.show = false;
                    that.loadData();
                  }
                }).finally(() => {
                  that.addModel.confirmLoading = false;

                });
              }

            })
          },
          handleEdit: function (record) {
            this.addModel.data= Object.assign({}, record);
            this.addModel.confirmLoading = false;
            this.addModel.show = true;

          },
          handleAdd: function () {
            this.addModel.data= {modelId:this.model.id};
            this.addModel.confirmLoading = false;
            this.addModel.show = true;
          },
          getQueryParams() {

            return {modelId:this.model.id}
          },

          beforeLoadData(){
            return !!this.model.id;
          },
          resetScreenSize(){
            let screenWidth = document.body.clientWidth;
            this.drawerWidth = screenWidth;
          },
        }
    }
</script>

<style scoped>

</style>